<!-- svg画廊 -->
<template>
  <div class="container">
    <div v-for="svg in svgs" :key="svg" class="svgItem">
      <SVGIcon :iconName="svg" :size="30" />
      <p class="title">{{ svg }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import SVGIcon from "./../svgIcon/SVGIcon.vue";

const svgs = ref<string[]>([]);
const importSvgs = async () => {
  try {
    // 动态导入svg文件
    // @ts-ignore
    const svgContext = require.context("../../assets/icons", false, /\.svg$/);

    // 获取所有svg文件的路径
    const svgPaths = svgContext.keys();

    // 载入这些路径指示的SVG模块
    svgPaths.forEach((path: string) => {
      const name = path.replace(/.\/|.svg$/g, "");
      svgs.value.push(name);
    });
  } catch (error) {
    console.error("Error importing SVGs:", error);
  }
};
importSvgs();
</script>

<style lang="less" scoped>
.container {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(60px, 1fr)
  ); /* 这会创建尽可能多的列，列宽至少为200px且尽量均等分布 */
  grid-gap: 10px; /* 格子之间的间隔 */
  grid-auto-flow: row; /* 在需要时自动将网格项目移动到新的行中 */
}
.svgItem {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.title {
  text-align: center;
}
</style>
